<template>
	<view class="page">
		<view class="form">
			<view class="item">
				<text>姓名</text>
				<text>小美</text>
			</view>
			<view class="item">
				<text>年龄</text>
				<text>88</text>
			</view>
			<view class="item">
				<text>失能情况</text>
				<text>困难，无法走路</text>
			</view>
			<view class="item">
				<text>服务项目</text>
				<text>助洁</text>
			</view>
			<view class="item">
				<text>服务内容</text>
				<text>洗漱</text>
			</view>
		</view>
		
		<view class="btns">
			<view class="btn" :animation="animationData"></view>
			<view class="btnConter"></view>
			<view class="btnConterText">开始</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				animationData: {},
				
			}
		},
		computed: {
			...mapState(['user','common'])
		},
		onShow() {
			var animation = uni.createAnimation({
				duration: 1000,
				timingFunction: 'linear',
			})
			this.animation = animation
			setInterval(function() {
				animation.scale(1.2, 1.2).step()
				animation.scale(1, 1).step()
				this.animationData = animation.export()
			}.bind(this), 1000)
		},
		methods: {
			
		}
	}
</script>

<style lang="less" scoped>
page {
	background-color: #fff;
}
.form {
	.item {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 20rpx 40rpx;
		text {
			display: inline-block;
			font-size: 32rpx;
			height: 40rpx;
			&:nth-child(1) {
				color: #333;
				width: 200rpx;
			}
			&:nth-child(2) {
				color: #777;
			}
		}
	}
}

.btns {
	position: relative;
	width: 300rpx;
	height: 300rpx;
	margin: 0 auto;
	margin-top: 300rpx;
	.btn {
			width: 276rpx;
			height: 276rpx;
			background: #C7F1D1;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			border-radius: 100%;
		}
		.btnConter {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			width: 228rpx;
			height: 227rpx;
			padding-top: 1rpx;
			background: #B3EAC0;
			border-radius: 100%;
			animation: myRotate 10s linear infinite;
		}
	
	
		@keyframes myRotate {
			0% {
				transform: rotate(0);
			}
	
			100% {
				transform: rotate(360deg);
			}
		}
	
		.btnConterText {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			width: 176rpx;
			height: 176rpx;
			background: #4CBD66;
			border-radius: 100%;
			/* margin: 24rpx auto; */
			line-height: 176rpx;
			text-align: center;
			font-size: 30rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}
}

</style>
